<template>
    <el-form ref="ruleFormRef" style="max-width: 600px" :model="ruleForm" :rules="rules" label-width="auto"
        class="demo-ruleForm" :size="formSize" status-icon>
        <el-form-item label="事故标题" prop="accidentTitle">
            <el-input v-model="ruleForm.accidentTitle" />
        </el-form-item>
        <el-form-item label="车牌号" prop="accidentBand">
            <el-input v-model="ruleForm.accidentBand" />
        </el-form-item>
        <el-form-item label="事发人" prop="accidentName">
            <el-input v-model="ruleForm.accidentName" />
        </el-form-item>
        <el-form-item label="事故日期" prop="accidentTime">
            <el-date-picker v-model="ruleForm.accidentTime" type="date" aria-label="Pick a date"
                placeholder="Pick a date" style="width: 100%" format="YYYY/MM/DD" value-format="YYYY-MM-DD" />
        </el-form-item>
        <el-form-item label="保险公司赔偿" prop="accidentPrice">
            <el-input v-model="ruleForm.accidentPrice" />
        </el-form-item>
        <el-form-item label="公司净损失" prop="accidentLoss">
            <el-input v-model="ruleForm.accidentLoss" />
        </el-form-item>
        <el-form-item label="事故描述" prop="accidentDesc">
            <el-input v-model="ruleForm.accidentDesc" />
        </el-form-item>
        <el-form-item label="直接经济损失" prop="accidentEconomy">
            <el-input v-model="ruleForm.accidentEconomy" />
        </el-form-item>
        <el-form-item label="备   注" prop="accidenRemark">
            <el-input v-model="ruleForm.accidenRemark" type="textarea" />
        </el-form-item>
        <el-form-item>
            <el-button type="primary" @click="submitForm(ruleFormRef)">
                返回
            </el-button>
        </el-form-item>
    </el-form>
</template>

<script setup lang="ts">
import { ref, onMounted, reactive } from 'vue'
import axios from 'axios';
import { useRouter, useRoute } from 'vue-router';
const router = useRouter();
const route = useRoute();
import { ElMessage, type ComponentSize, type FormInstance, type FormRules } from 'element-plus'

const ruleForm = reactive({
    accidentId:route.query.id,
    "accidentTitle": "",
    "accidentBand": "",
    "accidentName": "",
    "accidentTime": "",
    "accidentPrice": "",
    "accidentLoss": "",
    "accidentDesc": "",
    "accidentEconomy": "",
    "accidenRemark": "",
})
const GetAccidentId=()=>{
    axios.get("/ReadMaintent/api/Repairs/GetAccidentId?id="+route.query.id)
    .then(res=>{
        ruleForm.accidentId=route.query.id,
        ruleForm.accidentTitle=res.data.data.accidentTitle,
    ruleForm.accidentBand=res.data.data.accidentBand,
    ruleForm.accidentName=res.data.data.accidentName,
    ruleForm.accidentTime=res.data.data.accidentTime,
    ruleForm.accidentPrice=res.data.data.accidentPrice,
    ruleForm.accidentLoss=res.data.data.accidentLoss,
    ruleForm.accidentDesc=res.data.data.accidentDesc,
    ruleForm.accidentEconomy=res.data.data.accidentEconomy,
    ruleForm.accidenRemark=res.data.data.accidenRemark,
    ruleForm.firmId=res.data.data.firmId,
    ruleForm.userId=res.data.data.userId,
    ruleForm.createName=res.data.data.createName,
    ruleForm.createDate=res.data.data.createDate
    })
}
onMounted(()=>{
    GetAccidentId()
})

const ruleFormRef = ref<FormInstance>()
const rules = reactive<FormRules>({
    accidentTitle: [
        { required: true, message: '事故标题不能为空', trigger: 'blur' },
        { min: 3, max: 5, message: 'Length should be 3 to 5', trigger: 'blur' },
    ],
    accidentBand: [
        { required: true, message: '车牌号不能为空', trigger: 'change', },
    ],
    accidentName: [
        { required: true, message: '事发人不能为空', trigger: 'change', },
    ],
    accidentTime: [
        { required: true, message: '事故日期不能为空', trigger: 'change', },
    ],
    accidentPrice: [
        { required: true, message: '保险公司赔偿不能为空', trigger: 'change', },
    ],
    accidentLoss: [
        { required: true, message: '公司净损失不能为空', trigger: 'change', },
    ],
    accidentDesc: [
        { required: true, message: '事故描述不能为空', trigger: 'change', },
    ],
    accidentEconomy: [
        { required: true, message: '直接经济损失不能为给空', trigger: 'change', },
    ],
    accidenRemark: [
        { required: true, message: '备注不能为空', trigger: 'change', },
    ],
})

const submitForm = async (formEl: FormInstance | undefined) => {
    if (!formEl) return
    await formEl.validate((valid, fields) => {
        if (valid) {
            router.push({
                name:"AccidentShow"
            })
        } else {
            console.log('error submit!', fields)
        }
    })
}

const resetForm = (formEl: FormInstance | undefined) => {
    if (!formEl) return
    formEl.resetFields()
}



</script>